<template>
    <div class="tabbar-group">

        <div class="tabbar-route">
            <transition :name="transitionName">
                <router-view class="child-view"></router-view>
            </transition>
        </div>
        <div class="tabbar-menu">
            <router-link tag="div" to="/home" class="tabbar-item" replace>
                <van-icon class-prefix="iconfont" name="home" />
                <span>首页</span>
            </router-link>
            <router-link tag="div" to="/my" class="tabbar-item" replace>
                <van-icon class-prefix="iconfont" name="mine" />
                <span>我的</span>
            </router-link>
        </div>
    </div>
</template>

<script>
    import {Icon} from 'vant'
    export default {
        name: "tabbar",
        components: {'van-icon': Icon},
        data() {
            return {
                transitionName: 'slide-right'
            }
        },
        watch: {
            '$route' (to) {
                if(to.name =='mine'){
                    this.transitionName = 'slide-left';
                }else {
                    this.transitionName = 'slide-right';
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .tabbar-group{
        height: 100vh;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        justify-content: space-between;
        .tabbar-route{
            flex: 1;
            height: calc(100vh - @tabbar-height - 1px);
            overflow: hidden;
            position: relative;
            .slide-left-enter, .slide-right-leave-active {
                opacity: 0;
                -webkit-transform: translate(30px, 0);
                transform: translate(30px, 0);
            }
            .slide-left-leave-active, .slide-right-enter {
                opacity: 0;
                -webkit-transform: translate(-30px, 0);
                transform: translate(-30px, 0);
            }
            .child-view {
                height: calc(100vh - @tabbar-height - 1px);
                transition: all .5s cubic-bezier(.55,0,.1,1);
            }

        }
        .tabbar-menu{
            border-top: 1px solid #ddd;
            height: @tabbar-height;
            display: flex;
            .tabbar-item{
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: @mini;
                i{
                    font-size: 25px;
                }
                span{
                    font-size: @mini;
                }
                &:not(.router-link-active){
                    color: #999;
                }
                &.router-link-active{
                    color: @theme-color;
                    span{
                        color: @theme-color;
                    }
                }
            }
        }
    }
</style>
